const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    mode: "production",
    output: {
        filename: 'js/[name].bundle.[contenthash:5].js',
        path: path.resolve(__dirname, '../production'), // 打包生成的文件夹
        publicPath: './',
        assetModuleFilename: 'images/[hash][ext][query]'
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'style/[name].[contenthash:8].css'
        })
    ],
    /**
   * webpack中实现代码分割的两种方式：
   * 1.同步代码：只需要在webpack配置文件总做optimization的配置即可
   * 2.异步代码(import)：异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中
   */
  optimization: {
    splitChunks: {
      chunks: "all",          //async异步代码分割 initial同步代码分割 all同步异步分割都开启
      minSize: 30000,         //字节 引入的文件大于30kb才进行分割
      //maxSize: 50000,         //50kb，尝试将大于50kb的文件拆分成n个50kb的文件
      minChunks: 1,           //模块至少使用次数
      maxAsyncRequests: 5,    //同时加载的模块数量最多是5个，只分割出同时引入的前5个文件
      maxInitialRequests: 3,  //首页加载的时候引入的文件最多3个
      automaticNameDelimiter: '~', //缓存组和生成文件名称之间的连接符
      name: false,                  //缓存组里面的filename生效，覆盖默认命名
      cacheGroups: { //缓存组，将所有加载模块放在缓存里面一起分割打包
        commons: {
            test: /[\\/]node_modules[\\/]/,
            priority: -1, //优先级，先打包到哪个组里面，值越大，优先级越高
            // cacheGroupKey here is `commons` as the key of the cacheGroup
            name(module, chunks, cacheGroupKey) {
              // console.log('module:', module, 'chunks:', chunks, 'cacheGroupKey:', cacheGroupKey);
              const moduleFileName = module.identifier().split('\\').reduceRight((item) => item);
              // const allChunksNames = chunks.map((item) => item.name).join('~');
              // console.log(`++++${cacheGroupKey}-${allChunksNames}-${moduleFileName}++++`);
              return moduleFileName;
            },
            chunks: 'all',
        },
        default: { //默认打包模块
          priority: -20,
          reuseExistingChunk: true, //模块嵌套引入时，判断是否复用已经被打包的模块
          name: 'common',
          chunks: 'initial',
          maxSize: 50000,         //50kb，尝试将大于50kb的文件拆分成n个50kb的文件
          minChunks: 2  //模块被引用2次以上的才抽离
        }
      }
    }
  }
}